<script setup>
import {toRefs} from "vue";
import axios from "axios";
import router from "@/router";

const props = defineProps({
  knowledgeBase: {
    type: Object,
    required: true,
    default: {
      id: 0,
      name: "",
      icon: "default.png",
      backgroundColor: ""
    }
  }
})

const {knowledgeBase} = toRefs(props);

// 点击跳转到知识库详情页面
const navigateToKnowledgeBaseDetail = () => {
  router.push({name: "knowledge-base-detail", params: {id: knowledgeBase.value.id}})
}
</script>

<template>
  <!-- 知识库组件, 包含图标和名称 -->
  <div class="knowledge-base-item" @click="navigateToKnowledgeBaseDetail">
    <div :style="{backgroundColor: knowledgeBase.backgroundColor}" class="knowledge-base-item-icon">
      <img :alt="`${knowledgeBase.name}`" :src="`${axios.defaults.baseURL}/icon/${knowledgeBase.icon}`">
    </div>
    <div class="knowledge-base-item-name van-ellipsis">{{ knowledgeBase.name }}</div>
  </div>
</template>

<style lang="scss" scoped>
/** 知识库组件样式 **/
.knowledge-base-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .knowledge-base-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);

    img {
      width: 61.8%;
      height: 61.8%;
    }
  }

  .knowledge-base-item-name {
    margin-top: 0.5rem;
    color: #333;
    font-weight: 500;
    font-size: 0.8rem;
    width: 100%;
    text-align: center;
  }
}


</style>